<template>
	<a-modal title="代理" :width="700" :visible="visible" @ok="submit" @cancel="cancelAdd">
		<a-form :form="form">
			<!--  <a-form-item label="logo">
        <a-upload list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
          :action="aliOssConfig.uploadUrl" :before-upload="beforeUpload" :data="formData" @change="handleChange"
          v-decorator="['logo', { rules: [{ required: true, message: '请上传logo！' }] }]">
          <img style="width: 100%" v-if="imageUrl" :src="imageUrl" alt="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item> -->
			<a-form-item label="姓名">
				<a-input v-decorator="['name',{ rules: [{ required: true, message: '请输入' }] }]" placeholder="" />
			</a-form-item>
			<a-form-item label="手机号">
				<a-input v-decorator="['phone',{ rules: [{ required: true, message: '请输入' }] }]" placeholder="" />
			</a-form-item>
			<a-form-item label="身份证号">
				<a-input v-decorator="['cardid',{ rules: [{ required: true, message: '请输入' }] }]" placeholder="" />
			</a-form-item>
			<a-form-item label="省份">
				<a-input v-decorator="['province',{ rules: [{ required: false, message: '请输入' }] }]" placeholder="" />
			</a-form-item>
			<a-form-item label="密码">
				<a-input v-decorator="['pwd',{ rules: [{ required: true, message: '请输入' }] }]" placeholder="" />
			</a-form-item>
			<a-form-item label="类型">
				<a-radio-group v-decorator="['state',{ rules: [{ required: true, message: '请选择' }] }]"
					name="radioGroup">
					<a-radio :value="1">销售人员(自营)</a-radio>
					<a-radio :value="2">销售人员(代理)</a-radio>
					<a-radio :value="3">省区经理</a-radio>
					<a-radio :value="4">平台管理员</a-radio>
				</a-radio-group>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script>
	import {
		salespersonAdd,
		salespersonUpdate
	} from '@/api/salesperson'
	import {
		getFormData
	} from '@/utils/aliOss/aliossUpload.js'
	import aliOssConfig from '@/utils/aliOss/config'
	const formItemLayout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 8
		},
	};
	const formTailLayout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 8,
			offset: 4
		},
	};

	export default {
		props: {
			visible: {
				type: Boolean,
				required: true,
			}
		},
		data() {
			return {
				checkNick: false,
				formItemLayout,
				formTailLayout,
				form: this.$form.createForm(this),
				loading: false,
				imageUrl: '',
				formData: {},
				aliOssConfig: aliOssConfig,
				id: 0,
				updateflag: false
			};
		},
		methods: {
			setState() {
				this.form.setFieldsValue({
					state: 1
				})
			},
			cancelAdd() {
				this.updateflag = false
				this.$emit('cancel', true)
				this.form.resetFields()
				this.imageUrl = ''
			},
			setUpdate(formValue) {
				var that = this
				this.updateflag = true
				this.id = formValue.id
				that.form.setFieldsValue({
					phone: formValue.phone,
					pwd: formValue.pwd,
					province: formValue.province,
					name: formValue.name,
					cardid: formValue.cardid,
					state: formValue.state,
				})
			},
			submit() {
				var that = this
				const {
					form: {
						validateFields
					},
				} = this

				validateFields((errors, values) => {
					if (!errors) {
						// values.logo = that.imageUrl;
						if (this.updateflag) {
							values.id = this.id
							salespersonUpdate({
								...values,
							}).then((res) => {
								if (res.code == 0) {
									that.form.resetFields()
									that.$emit('ok')
								}
							})
						} else {
							salespersonAdd({
								...values,
							}).then((res) => {
								if (res.code == 0) {
									that.form.resetFields()
									that.$emit('ok')
								}
							})
						}
					}
				})
			},
			beforeUpload(file) {
				this.formData = getFormData()
				const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
				if (!isJpgOrPng) {
					this.$message.error('请上传图片类型文件!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if (!isLt2M) {
					this.$message.error('图片最大体积为2MB!')
				}
				return isJpgOrPng && isLt2M
			},
			check() {
				this.form.validateFields(err => {
					if (!err) {
						console.info('success');
					}
				});
			},
			handleChange(info) {
				if (info.file.status === 'uploading') {
					this.loading = true
					return
				}
				console.log(info.file.status)
				if (info.file.status == 'done') {
					this.imageUrl = this.aliOssConfig.uploadUrl + '/' + this.formData.key
					this.loading = false
				}
			},
		},
	};
</script>